<template>
    <div class="left-container">
        <div class="ztqk">
            <div class="ztqk-title">
                <titleRow title="党建整体情况" />
            </div>
            <ul class="ztqk-content">
                <li v-for="(item,index) in ztqkList" :key="index" class="ztqk-row">
                    <div class="icon-wrapper">
                        <img :src="item.icon" alt="">
                    </div>
                    <div>
                        <div class="ztqk-row-title" :style = "index == '4'?{marginTop:'0',height:'30px',width:'60px'}:{}">{{item.name}}</div>
                        <div class="ztqk-row-num">{{item.num}}</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="dzzfx">
            <div class="fx1">
                <titleRow title="党组织数量分析" />
                <div id="dzzfx1"></div>
            </div>
            <div class="fx1">
                <titleRow title="党组织星级平均值分析" />
                <div class="dzzfx2">
                    <div class="start-row" v-for="(item,index) in starList" :key="index">
                        <div class="star-label">{{item.name}}</div>
                        <rate :rate="item.rate" />
                        <div class="star-num">{{item.rate}}星</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dzzfx">
            <div class="fx1">
                <titleRow title="党员年龄性别分析" />
                <div class="xbfx-title">
                    <div class="sex-row-bg1">
                        <div>
                            <span class="man-num">{{manNum}}</span>
                            <span class="man-tag">人</span>
                        </div>
                        <div class="man-p">{{manRote}}%</div>
                    </div>
                    <div class="sex-row-bg2">
                        <div>
                            <span class="woman-num">{{womanNum}}</span>
                            <span class="man-tag">人</span>
                        </div>
                        <div class="man-p">{{womanRote}}%</div>
                    </div>
                </div>
                <div id="xbfx">

                </div>
            </div>
            <div class="fx1">
                <titleRow title="党员党龄积分平均值" />
                <div class="jf-bg">
                    <div v-for="(item,index) in dynlList" :key="index" :class="`jf${index+1}`" class="top-jf-row">
                        <div class="jf-num">{{item.avgscore}}</div>
                        <div class="jf-tag">{{item.agegroup}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import titleRow from "./titleRow";
import rate from "./rate";
import echarts from "echarts";
import Pubsub from "../../utils/pubsub";

import ztqk1 from "../../assets/dp2/ztqk1.png";
import ztqk2 from "../../assets/dp2/ztqk2.png";
import ztqk3 from "../../assets/dp2/ztqk3.png";
import ztqk4 from "../../assets/dp2/ztqk4.png";
import ztqk5 from "../../assets/dp2/ztqk5.png";

import dzzIcon1 from "../../assets/dp2/dzz-icon1.png";
import dzzIcon2 from "../../assets/dp2/dzz-icon2.png";
import dzzIcon3 from "../../assets/dp2/dzz-icon3.png";
import dzzIcon4 from "../../assets/dp2/dzz-icon4.png";
import dzzIcon5 from "../../assets/dp2/dzz-icon5.png";
import dzzIcon6 from "../../assets/dp2/dzz-icon6.png";
import dzzIcon7 from "../../assets/dp2/dzz-icon7.png";

import { dzzfx1Render, xbfxRender } from "./statConfig";
import {
    getDjztqk,
    getDzzdysl,
    getDynlxb,
    getDzzxjpjz,
    getDynljf
} from "../../config/api";

export default {
    components: {
        titleRow,
        rate
    },
    data() {
        return {
            commonRequest: { town: "all" },
            manNum:0,//男性人数
            womanNum:0,//女性人数
            manRote:0,//男性比例
            womanRote:0,//女性比例
            chart1:null,
            chart2:null,
            ztqkList: [
                { name: "党组织", icon: ztqk1, num: 1688 },
                { name: "党员数", icon: ztqk2, num: 1658 },
                { name: "学习强国", icon: ztqk3, num: 8618 },
                { name: "三会一课", icon: ztqk4, num: 1654 },
                { name: "不忘初心 牢记使命", icon: ztqk5, num: 1564 },
            ],
            starList: [
                // { name: "机关", rate: 5.0 },
                // { name: "乡镇", rate: 3.5 },
                // { name: "事业单位", rate: 4.0 },
                // { name: "国有经济控制", rate: 3.0 },
                // { name: "建制村", rate: 3.5 },
                // { name: "非公有经济控制", rate: 2.5 },
                // { name: "社会组织", rate: 2.0 }
            ],
            dynlList: [
                { agegroup: "5年以下", avgscore: 0 },
                { agegroup: "5年至10年", avgscore: 0 },
                { agegroup: "10年至15年", avgscore: 0 },
                { agegroup: "15年至20年", avgscore: 0 },
                { agegroup: "20年以上", avgscore: 0 }
            ]
        };
    },
    mounted() {
        // this.myChart1 = echarts.init(document.getElementById("xbfx"));
        // this.myChart1.setOption(xbfxRender());
        // this.myChart1 = dzzfx1Render();
        // dzzfx1Render();
        this.pubsub_token1 = Pubsub.subscribe("refreshDpTownData", (t, args) => {
            let { town } = args;
            this.commonRequest.town = town;
            this.getData();
        });
        this.pubsub_token2 = Pubsub.subscribe("refreshDp2Data", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.getData();
        });
        this.getData();
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
        this.pubsub_token2 && Pubsub.unsubscribe(this.pubsub_token2);
    },
    methods: {
        getData() {
            this.getDjztqkData(); //获取党建整体情况
            this.getDzzdyslData(); //获取党组织数量分析
            this.getDynlxbData(); //获取党员年龄性别分析
            this.getDzzxjpjzData(); //获取党组织星级平均值分析
            this.getDynljfData(); //获取党员党龄积分平均值
        },
        /**
         * 获取党建整体情况
         */
        getDjztqkData() {
            getDjztqk(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.ztqkList[0].num = data.orgcount || 0;
                this.ztqkList[1].num = data.usercount || 0;
                this.ztqkList[2].num = data.lxyz || 0;
                this.ztqkList[3].num = data.shyk || 0;
                this.ztqkList[4].num = data.hd || 0;
            });
        },
        /**
         * 党组织数量分析
         */
        getDzzdyslData() {
            getDzzdysl(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let tempArr = [];
                let maxArr = [];
                data.map(item => {
                    tempArr.push({
                        name: item.label,
                        value: item.num
                    });
                    maxArr.push(item.num);
                });
                let max = Math.max.apply(null, maxArr);
                let params = {
                    data: tempArr,
                    max
                };
                this.chart1 = dzzfx1Render(params,this.chart1);
            });
        },
        /**
         * 获取党员性别年龄
         */
        getDynlxbData() {
            getDynlxb(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let statics = data.statics || [];
                let man = data.man || {};
                let woman = data.woman || {};
                this.manNum = man.total;
                this.manRote = man.ratio;
                this.womanNum = woman.total;
                this.womanRote = woman.ratio;
                let defaultData = [
                    {
                        label: "20以下",
                        type: "男",
                        sex:"1",
                        value: 0
                    },
                    {
                        label: "20以下",
                        type: "女",
                         sex:"2",
                        value: 0
                    },
                    {
                        label: "20到40",
                        type: "男",
                         sex:"1",
                        value: 0
                    },
                    {
                        label: "20到40",
                        type: "女",
                         sex:"2",
                        value: 0
                    },
                    {
                        label: "40到60",
                        type: "男",
                         sex:"1",
                        value: 0
                    },
                    {
                        label: "40到60",
                        type: "女",
                         sex:"2",
                        value: 0
                    },
                    {
                        label: "60到80",
                        type: "男",
                         sex:"1",
                        value: 0
                    },
                    {
                        label: "60到80",
                        type: "女",
                         sex:"2",
                        value: 0
                    },
                    {
                        label: "80以上",
                        type: "男",
                         sex:"1",
                        value: 0
                    },
                    {
                        label: "80以上",
                        type: "女",
                         sex:"2",
                        value: 0
                    }
                ];
                defaultData.map(item => {
                    statics.map(sItem => {
                        if(item.label == sItem.ageTemp && item.sex == sItem.sex){
                            // item.type =  sItem.sex == 1 ? "男" : "女";
                            item.value = sItem.total;
                        }
                    });
                });

                let params = {
                    data: defaultData
                };
                this.chart2 = xbfxRender(params,this.chart2);
            });
        },
        /**
         * 党组织星级平均值分析
         */
        getDzzxjpjzData() {
            getDzzxjpjz(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let tempArr = [];
                data.map(item => {
                    tempArr.push({
                        name: item.label,
                        rate: item.xj_m
                    });
                });
                this.starList = tempArr;
            });
        },
        /**
         * 党员党龄积分平均值
         */
        getDynljfData() {
            getDynljf(this.commonRequest).then((result = {}) => {
                let { data = [] } = result;
                this.dynlList = data;
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.left-container {
    width: 936px;
    padding-top: 90px;
    box-sizing: border-box;
}
.ztqk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    &-content {
        margin: 19px 0 17px 0;
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }
    &-row {
        height: 80px;
        width: 170px;
        background: url("../../assets/dp2/dj-ztqk-bg.png");
        display: flex;
        .icon-wrapper {
            height: 80px;
            width: 74px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &-title {
            margin: 10px 0 18px 14px;
            color: #ffd2d2;
        }
        &-num {
            color: #fff100;
            margin-left: 14px;
            font-size: 22px;
        }
    }
}
.dzzfx {
    display: flex;
    .fx1 {
        width: 468px;
    }
}
#dzzfx1 {
    height: 280px;
    width: 468px;
}
.dzzfx2 {
    margin-top: 20px;
    padding-left: 55px;
    .star-label {
        width: 98px;
        text-align: right;
        margin-right: 10px;
        color: #ffd2d2;
    }
    .star-num {
        margin-left: 18px;
        letter-spacing: 2px;
        color: #fff100;
    }
}
.start-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.xbfx-title {
    display: flex;
    justify-content: space-between;
    padding: 15px 35px 25px 40px;
    .sex-row-bg1 {
        height: 80px;
        width: 186px;
        background: url("../../assets/dp2/man-bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        box-sizing: border-box;
        padding-left: 95px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        // align-items: center;
    }
    .sex-row-bg2 {
        height: 80px;
        width: 186px;
        background: url("../../assets/dp2/woman-bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        box-sizing: border-box;
        padding-left: 38px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}
#xbfx {
    height: 138px;
    width: 450px;
    margin-left: 18px;
}
.man-num {
    font-size: 22px;
    color: #87d9ff;
}
.man-tag {
    color: #fff;
}
.man-p {
    margin-top: 2px;
}
.woman-num {
    font-size: 22px;
    color: #ffb0d3;
}
.jf-bg {
    width: 500px;
    height: 280px;
    background: url("../../assets/dp2/jf-bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.top-jf-row {
    position: absolute;
    width: 94px;
    background: url("../../assets/dp2/dynl-item-bg.png");
    height: 65px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.jf1 {
    left: 20px;
    top: 40px;
}
.jf2 {
    left: 96px;
    bottom: 55px;
}
.jf3 {
    top: 40px;
    left: 176px;
}
.jf4 {
    bottom: 55px;
    left: 251px;
}
.jf5 {
    top: 40px;
    right: 80px;
}
.jf-num {
    color: #fff100;
    font-size: 30px;
    height: 38px;
}
.jf-tag {
    color: #ffd5d5;
}
.bottom-jf {
    top: 150px;
    left: 22px;
}
</style>